<template>
  <div class="notation-transformer">
    <h3>简谱转换器-简单版-没有二分音, 四分音, 连接符等</h3>
    <div class="notation-input">
      <a-space>
        <a-select
          :options="options"
          v-model:value="from"
          optionLabelProp="label"
        >
          <template #option="{ value }">
            <NotationChar :char="value" />
            <!-- {{ label }} -->
          </template>
          <template #tagRender="{ value }">
            <NotationChar :char="value" />
            <!-- {{ label }} -->
          </template>
        </a-select>
        <a-tag>转</a-tag>
        <a-select :options="options" v-model:value="to">
          <template #option="{ value }">
            <NotationChar :char="value" />
            <!-- {{ label }} -->
          </template>
        </a-select>
        <a-button type="primary" @click="handleTransform">转换</a-button>
      </a-space>
    </div>
    <div class="notation-container pt1">
      <div class="orign-input">
        <NotationChar v-for="(char, index) in data" :key="index" :char="char" />
        <div class="notation-input">
          <a-space>
            <a-select :options="options" v-model:value="char">
              <template #option="{ value }">
                <NotationChar :char="value" />
                <!-- {{ label }} -->
              </template>
            </a-select>
            <a-button type="primary" @click="handleAdd">添加</a-button>
            <a-button type="primary" danger @click="handleDelete"
              >删除</a-button
            >
          </a-space>
        </div>
      </div>
      <div class="transform-result">
        <NotationChar
          v-for="(char, index) in transformedData.data"
          :key="index"
          :char="char"
        />
      </div>
    </div>
  </div>
</template>
<script>
function createOptions() {
  let levels = ['low', 'mid', 'high']
  const options = []
  for (let level of levels) {
    for (let i = 1; i < 8; i++) {
      options.push({ value: `${level}-${i}`, label: level + i })
    }
  }
  return options
}
import NotationChar from './NotationChar.vue'
import { reactive, ref } from 'vue'
export default {
  name: 'NotationTransformer',
  components: {
    NotationChar,
  },
  setup() {
    const options = reactive(createOptions())
    const data = reactive([])
    const transformedData = reactive({ data: [] })
    const from = ref('')
    const to = ref('')
    const char = ref('')
    const handleAdd = () => {
      if (char.value) {
        data.push(char.value)
      }
    }
    const handleDelete = () => {
      if (data.length) {
        data.pop()
      }
    }
    const handleTransform = () => {
      const fromIndex = options.findIndex((item) => item.value === from.value)
      const toIndex = options.findIndex((item) => item.value === to.value)
      // console.log(fromIndex, toIndex)
      const des = toIndex - fromIndex
      const result = []
      data.forEach((item) => {
        const itemIndex = options.findIndex(
          (innerItem) => innerItem.value === item
        )
        const newIndex = itemIndex + des
        result.push(options[newIndex].value)
      })
      transformedData.data = result
    }
    return {
      options,
      data,
      from,
      to,
      char,
      transformedData,
      handleAdd,
      handleDelete,
      handleTransform,
    }
  },
}
</script>
<style lang="less" scoped>
.notation-transformer {
  height: 100%;
  // .notation-input {
  //   display: inline-block;
  // }
  .notation-container {
    display: flex;
    align-items: stretch;
    min-height: 400px;
    gap: 12px;
    padding: 12px;
    .orign-input,
    .transform-result {
      flex: 1;
      border: 1px solid #efefef;
      padding: 12px;
      text-align: left;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 12px;
    }
  }
}
</style>
